<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      .a {
        width: 100%;
        height: 200px;
        background-color: whitesmoke;
      }
      .a1 {
        height: 30px;
        margin: 10px;
        background-color: lightskyblue;
        border: 1px solid lightskyblue;
        cursor: pointer;
      }
      select {
        width: 170px;
        height: 22px;
      }
      .a2 {
        color: blue;
        background-color: white;
        border: 1px solid white;
      }
      .a2:hover {
        background-color: lightskyblue;
      }
      .b {
        width: 100%;
        height: 400px;
      }
    </style>
    <div class="a" id="bos">
      <button class="a1" id="btn">+添加商品</button>
      <br />
      <br />
      商品名称:<input type="text" placeholder="商品名称/编码/条码" id="name" />
      库存:<input type="text" id="kuchun" /> 价格:<input
        type="text"
        id="jiage"
      /><br /><br />
      状 态:<input type="text" id="zhuangtai" /> 已 售:<input
        type="text"
        id="yiso"
      />
      图片链接:<input type="text" id="imgs" /> <br /><br />
      <input type="text" id="nameS" /><button class="a2" id="btnS">搜索</button
      ><br />
      <button class="a2">重置</button>
      <button class="a2">导出</button>
      <button class="a2" id="byn">确定修改</button>
    </div>
    <br />
    <div class="b">
      <table border="1" style="width: 700px">
        <thead>
          <tr>
            <td><input type="checkbox" id="all" /></td>
            <td>商品名称</td>
            <td class="mouseclick">库存</td>
            <td class="mouseclick">价格</td>
            <td>状态</td>
            <td class="mouseclick">已售</td>
            <td>图片链接</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody id="body"></tbody>
      </table>
      <button id="dels">删除选中</button>
    </div>
  </body>
  <script src="ajax.js"></script>
  <script>
    window.onload = function () {
      btn.onclick = btnFun;
      chengjiaFun();
      body.onclick = bodyFun;
      byn.onclick = bynFun;
      let index = null;
      document.getElementById("all").onchange = allFun;
      document.getElementById("dels").onclick = delsFun;

      btnS.addEventListener("click", btnSFun);
      nameS.addEventListener("keyup", btnSFun);

      document.querySelectorAll(".mouseclick")[0].onclick = sortFun;
      document.querySelectorAll(".mouseclick")[1].onclick = sortFun;
      document.querySelectorAll(".mouseclick")[2].onclick = sortFun;
    };
    let sortObj = {
      price: "asc",
      stock: "asc",
      sold: "asc",
    };
    function sortFun() {
      let data = {
        page: 1,
        limit: 1000,
      };
      if (this.innerHTML == "价格") {
        data.type = "price";
        data.sort = sortObj.price == "asc" ? "desc" : "asc";
        sortObj.price = data.sort;
      }
      if (this.innerHTML == "库存") {
        data.type = "stock";
        data.sort = sortObj.stock == "asc" ? "desc" : "asc";
        sortObj.stock = data.sort;
      }
      if (this.innerHTML == "销量") {
        data.type = "sold";
        data.sort = sortObj.sold == "asc" ? "desc" : "asc";
        sortObj.sold = data.sort;
      }
      ajax({
        url: "https://liu.zzgoodqc.cn/goods/sort",
        data: data,
        success: function (res) {
          sou(res.data);
        },
      });
    }

    function bynFun() {
      let data = {
        id: index,
        goods_name: document.getElementById("name").value,
        stock: kuchun.value,
        price: jiage.value,
        status: zhuangtai.value,
        sold: yiso.value,
        img: imgs.value,
      };
      ajax({
        type: "post",
        url: "https://liu.zzgoodqc.cn/goods/update",
        data: data,
        success: function (res) {
          chengjiaFun();
        },
      });
    }
    function delbbb(res) {
      var http = new XMLHttpRequest();
      http.open("GET", "https://liu.zzgoodqc.cn/goods/delete?id=" + res, false);
      http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
          let data = JSON.parse(http.responseText);
        }
      };
      http.send();
      chengjiaFun();
    }
    function bodyFun() {
      if (
        event.target.nodeName == "BUTTON" &&
        event.target.innerHTML == "删除"
      ) {
        var res = event.target.getAttribute("index");
        delbbb(res);
      }
      if (
        event.target.nodeName == "BUTTON" &&
        event.target.innerHTML == "修改"
      ) {
        var res = event.target.getAttribute("index");
        index = res;
        var http = new XMLHttpRequest();
        http.open(
          "GET",
          "https://liu.zzgoodqc.cn/goods/detail?id=" + res,
          false
        );
        http.onreadystatechange = function () {
          if (http.readyState == 4 && http.status == 200) {
            let data = JSON.parse(http.responseText);
            console.log(data);
            data = data.data;
            (document.getElementById("name").value = data.goods_name),
              (kuchun.value = data.stock);
            jiage.value = data.price;
            zhuangtai.value = data.status;
            yiso.value = data.sold;
            imgs.value = data.img;
          }
        };
        http.send();
      }
    }

    function btnFun() {
      let data = {
        goods_name: document.getElementById("name").value,
        stock: kuchun.value,
        price: jiage.value,
        status: zhuangtai.value,
        sold: yiso.value,
        img: imgs.value,
      };
      ajax({
        type: "post",
        url: "https://liu.zzgoodqc.cn/goods/add",
        data: data,
        success: function (res) {
          chengjiaFun();
        },
      });
    }
    function delsFun() {
      let checkedObj = Array.from(document.querySelectorAll(".chk:checked"));
      checkedObj.forEach((item, index) => {
        let jnkjnk = item.getAttribute("data-id");
        delbbb(jnkjnk);
      });
    }
    function allFun() {
      let checkAll = this.checked;
      let chk = Array.from(document.getElementsByName("chk"));
      chk.forEach((item) => {
        item.checked = checkAll;
      });
    }
    function btnSFun(e) {
      if (e.keyCode == 13 || e.type == "click") {
        let nameS = document.querySelector("#nameS").value;
        console.log(nameS);
        if (nameS) {
          ajax({
            type: "POST",
            url: "https://liu.zzgoodqc.cn/goods/search",
            data: { goods_name: nameS },
            success: function (res) {
              if (res.code == 200) {
                sou(res.data);
              }
            },
          });
        }
      }
    }
    function chengjiaFun() {
      ajax({
        type: "get",
        url: "https://liu.zzgoodqc.cn/goods/goodslist",
        success: function (res) {
          sou(res.data);
        },
      });
    }
    function sou(res) {
      let html = "";
      res.forEach((item, index) => {
        html += `
              <tr>
          <td><input type="checkbox" class='chk' name="chk" data-id="${item.id}"/></td>
          <td>${item.goods_name}</td>
          <td>${item.stock}</td>
          <td>${item.price}</td>
          <td>${item.status}</td>
          <td>${item.sold}</td>
          <td>
            <img
              src="${item.img}"
              alt=""
              style="width:100px"
            />
          </td>
          <td><button index="${item.id}">删除</button> <button index="${item.id}">修改</button></td>
        </tr>
              `;
      });
      document.querySelector("tbody").innerHTML = html;
    }
  </script>
</html>
